<script setup lang="ts">
import useUserStore from "@/store/modules/user.ts";
import AvatarSetting from "@/views/blog/user/setting/AvatarSetting.vue";

const activeKey = ref('1');

const UserStore = useUserStore()
const userInfoForm = reactive({
  userName: null,
  nickName: null,
  sex: '0',
  email: null,
  signature: null
})
const onSubmit = () => {
  console.log(userInfoForm)
}

onMounted(() => {
  Object.keys(userInfoForm).forEach(key => {
    console.log(key)
    userInfoForm[key] = UserStore.userInfo[key]
  })
  console.log(userInfoForm)
})
</script>

<template>
  <div class="user-setting">
    <div class="bg"></div>
    <div class="content">
      <a-tabs v-model:activeKey="activeKey">
        <a-tab-pane key="1" tab="个人信息">
          <a-form :label-col="{ span: 2 }" :wrapper-col="{ span: 20 }">
            <a-form-item label="用户名">{{ userInfoForm.userName }} <span style="color: grey; margin-left: 60px">注：用户名不能修改</span></a-form-item>
            <a-form-item label="昵称">
              <a-input v-model:value="userInfoForm.nickName" placeholder="请输入昵称"/>
            </a-form-item>
            <a-form-item label="性别">
              <a-radio-group v-model:value="userInfoForm.sex">
                <a-radio value="0">男</a-radio>
                <a-radio value="1">女</a-radio>
                <a-radio value="2">保密</a-radio>
              </a-radio-group>
            </a-form-item>
            <a-form-item label="邮箱">
              <a-input v-model:value="userInfoForm.email" placeholder="请输入邮箱"/>
            </a-form-item>
            <a-form-item label="签名">
              <a-textarea v-model:value="userInfoForm.signature" rows="4" placeholder="请输入签名"/>
            </a-form-item>
            <!-- 保存                -->
            <a-form-item :wrapper-col="{ span: 24, offset: 20 }">
              <a-button type="primary" html-type="submit" @click="onSubmit">保存</a-button>
            </a-form-item>
          </a-form>
        </a-tab-pane>
        <a-tab-pane key="2" tab="我的头像" force-render>
          <AvatarSetting/>
        </a-tab-pane>
      </a-tabs>
    </div>
  </div>
</template>

<style scoped lang="scss">
.user-setting {
  position: relative;

  .bg {
    position: absolute;
    width: 100%;
    height: calc(100vh - $blog-nav-height);
    background: url("/src/assets/images/bg/蓝天背景_clear.png");
    background-size: cover;
    //opacity: 0.6;
  }

  .content {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 30px;
    width: 730px;
    //height: 500px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
    overflow: hidden;
    padding: 10px 20px;
    background-color: white;
  }
}

</style>
